<template>
  <view class="page">
    <u-navbar height="60" :auto-back="false" bg-color="#FFF9F0" :placeholder="true" :fixed="true" :border="false"
      @leftClick="open = !open" @rightClick="toMessage">
      <template #left>
        <view class="flex align-center">
          <u-avatar src="https://picsum.photos/200/300?random=100" size="60rpx"></u-avatar>
          <u-text margin="0 0 0 20rpx" :suffixIcon="open ? 'arrow-up-fill' : 'arrow-down-fill'"
            iconStyle="margin-left: 10rpx" align="center" :text="studentValue.name" size="32rpx" color="#333"></u-text>
        </view>
      </template>
    </u-navbar>

    <!-- 主内容区域 -->
    <view class="main" style="margin-top: 40rpx">
      <view class="top-block">
        <view class="left">
          <view class="box question" @click="toCollect">
            <u-text text="收集错题" size="32rpx" color="white"></u-text>
            <u-text text="拍照上传错题" size="24rpx" color="white"></u-text>
          </view>
          <view class="box homeword" @click="toHomework">
            <u-text text="作业条上传" size="32rpx" color="white"></u-text>
            <u-text text="拍照上传作业" size="24rpx" color="white"></u-text>
          </view>
        </view>
        <view class="right">
          <view class="title">
            <u-text text="我的消息" size="28rpx" color="#050F1A"></u-text>
            <u-text text="查看更多" suffixIcon="arrow-right" color="#9FA2A7" size="24rpx" align="right"
              iconStyle="font-size:20rpx;margin-top:4rpx" @click="toMessage"></u-text>
          </view>
          <view class="content">
            <u-text prefixIcon="·" :iconStyle="{
              fontSize: '84rpx',
              color: item.isRead ? '#999999' : '#FF9F19',
              marginRight: '10rpx'
            }" margin="20rpx 0 0 0" v-for="item in dailyReportList" :key="item.title" :text="item.title"
              :color="item.isRead ? '#999999' : '#333333'" size="26rpx"></u-text>
          </view>
        </view>
      </view>
      <view class="bottom-block">
        <view class="tabs" :class="currentTab === 'daily' ? 'daily-active' : 'weekly-active'">
          <view class="tab-item" :class="currentTab === 'daily' ? 'active' : ''" @click="changeTab('daily')">日报</view>
          <view class="tab-item" :class="currentTab === 'weekly' ? 'active' : ''" @click="changeTab('weekly')">周报</view>
          <view class="more" @click="toReport">
            <u-text suffixIcon="arrow-right" iconStyle="color:#9FA2A7;font-size:24rpx"
              :text="currentTab === 'daily' ? '往期日报' : '往期周报'" size="24rpx" color="#9FA2A7" align="right"
              margin="0 0 40rpx 0"></u-text>
          </view>
        </view>
        <!-- 日报 -->
        <view class="tab-content" v-if="currentTab === 'daily'">
          <!-- 在校时间 -->
          <view class="time-range">
            <view>
              <u-text prefixIcon="/static/icon/icon-daily.png" iconStyle="margin-right:10rpx;" text="9月17日 日报"
                color="#050F1A" size="32rpx"></u-text>
            </view>
            <view class="flex align-center margin-top-lg">
              <view class="flex-1">
                <u-text text="17:00" bold color="#050F1A" size="46rpx" align="center"></u-text>
                <u-text text="到校" color="#999999" size="24rpx" align="center" margin="10rpx 0 0 0"></u-text>
              </view>
              <view class="flex-1 margin-lr-lg">
                <u-text text="共3小时50分钟" color="#050F1A" size="24rpx" align="center"></u-text>
                <image style="width: 100%; height: 12rpx" src="/static/image/time-arrow.png">
                </image>
              </view>
              <view class="flex-1">
                <u-text text="20:00" bold color="#050F1A" size="46rpx" align="center"></u-text>
                <u-text text="离校" color="#999999" size="24rpx" align="center" margin="10rpx 0 0 0"></u-text>
              </view>
            </view>
          </view>
          <view class="knowledge-list">
            <u-text prefixIcon="/static/icon/icon-book.png" text="发现的薄弱知识点" size="32rpx" color="#050F1A"></u-text>
            <view class="margin-top" v-for="item in knowledgeList" :key="item.id">
              <view class="flex">
                <u-text :text="item.name" size="28rpx" color="#333333"></u-text>
                <u-text text="4题" color="#999999" size="28rpx" align="right"></u-text>
              </view>
              <view class="margin-top-sm">
                <up-line-progress height="10px" :percentage="30" :showText="false" activeColor="#FFB74D"
                  inactiveColor="#F8ECDC"></up-line-progress>
              </view>
            </view>
          </view>
          <view>
            <u-text suffixIcon="arrow-right" iconStyle="margin-top:4rpx;font-size:22rpx" margin="24rpx 0 0 0"
              align="center" color="#9FA2A7" size="28rpx" text="查看更多"></u-text>
          </view>
        </view>
        <!-- 周报 -->
        <view class="tab-content" v-if="currentTab === 'weekly'">
          <!-- 在校时间 -->
          <view class="time-range">
            <view class="flex align-center" @click="showSubject = true">
              <view>
                <u-text prefixIcon="/static/icon/icon-daily.png" iconStyle="margin-right:10rpx;" text="9月17日 周报-数学"
                  color="#050F1A" size="32rpx"></u-text>
              </view>
              <image src="/static/icon/icon-arrow-down-fill.png" mode="aspectFit" style="width: 22rpx; height: 16rpx">
              </image>
            </view>
            <view class="flex align-center margin-top-lg">
              <view class="flex-1">
                <u-text text="17:00" bold color="#050F1A" size="46rpx" align="center"></u-text>
                <u-text text="到校" color="#999999" size="24rpx" align="center" margin="10rpx 0 0 0"></u-text>
              </view>
              <view class="flex-1 margin-lr-lg">
                <u-text text="共3小时50分钟" color="#050F1A" size="24rpx" align="center"></u-text>
                <image style="width: 100%; height: 12rpx" src="/static/image/time-arrow.png">
                </image>
              </view>
              <view class="flex-1">
                <u-text text="20:00" bold color="#050F1A" size="46rpx" align="center"></u-text>
                <u-text text="离校" color="#999999" size="24rpx" align="center" margin="10rpx 0 0 0"></u-text>
              </view>
            </view>
          </view>
          <view class="knowledge-list">
            <u-text prefixIcon="/static/icon/icon-book.png" text="本周知识点纠正率" size="32rpx" color="#050F1A"></u-text>
            <view class="margin-top" v-for="item in knowledgeList" :key="item.id">
              <view class="flex">
                <u-text :text="item.name" size="28rpx" color="#333333"></u-text>
                <u-text text="50%" color="#999999" size="28rpx" align="right"></u-text>
              </view>
              <view class="margin-top-sm">
                <up-line-progress height="10px" :percentage="30" :showText="false" activeColor="#FFB74D"
                  inactiveColor="#F8ECDC"></up-line-progress>
              </view>
            </view>
          </view>
          <view>
            <u-text suffixIcon="arrow-right" iconStyle="margin-top:4rpx;font-size:22rpx" margin="24rpx 0 0 0"
              align="center" color="#9FA2A7" size="28rpx" text="查看更多"></u-text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <PopupBox bgColor="linear-gradient(180deg, #FFF9F0 0%, #FFFFFF 80%)" :top="160" :show="open" @close="open = false">
    <view class="student-item" v-for="item in studentList" :key="item.value" @click.stop.prevent="changeStudent(item)">
      <u-avatar src="https://picsum.photos/200/300?random=110" size="60rpx"></u-avatar>
      <view class="flex-1 margin-left-sm">
        <u-text :text="item.name" size="32rpx"></u-text>
      </view>
      <view style="width:80rpx;">
        <u-icon size="32rpx" name="checkmark" v-if="studentValue.value === item.value"></u-icon>
      </view>
    </view>
  </PopupBox>

  <!-- 选择学科周报的底部弹窗 -->
  <u-popup :closeable="true" :show="showSubject" @close="showSubject = false">
    <view class="subject-box">
      <u-text bold align="center" size="32rpx" color="#333333" text="选择周报"></u-text>
      <view class="subject-list">
        <view class="subject-item" v-for="item in subjectList" :key="item.id" @click="changeSubject(item)">
          <u-text customStyle="font-weight:400" size="32rpx" color="#000"
            :text="`${studentValue.name}的周报-${item.name}`"></u-text>
          <u-icon name="checkmark" size="40rpx" color="#FFB74D" v-if="item.id == subjectValue.id"></u-icon>
        </view>
      </view>
      <u-button size="large" type="primary" text="确定" shape="circle" @click="showSubject = false"></u-button>
    </view>
  </u-popup>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import PopupBox from '@/components/PopupBox/index.vue';
const open = ref(false); //打开学生下拉框
const studentValue = ref({ name: '张三', value: '1' }); //学生下拉框选中的值
const currentTab = ref('daily'); //当前选中的tab
const showSubject = ref(false); //打开科目下拉框
const subjectValue = ref({ name: '数学', id: 1 }); //科目下拉框选中的值
const studentList = ref([
  { name: '张三', value: '1' },
  { name: '李四', value: '2' }
]);
const dailyReportList = ref([
  {
    title: '今日学习报告今日学习报告',
    isRead: false
  },
  {
    title: '今日学习报告',
    isRead: true
  }
]);

// 知识点
const knowledgeList = ref([
  {
    id: 1,
    name: '时分秒的换算'
  },
  {
    id: 2,
    name: '10以内加减法'
  },
  {
    id: 3,
    name: '10以内乘除'
  }
]);
const subjectList = ref([
  {
    id: 1,
    name: '数学'
  },
  {
    id: 2,
    name: '语文'
  }
]);
const changeStudent = (value) => {
  studentValue.value = value;
  open.value = false;
};
const changeTab = (tab) => {
  currentTab.value = tab;
};
const changeSubject = (item) => {
  console.log(item);
  subjectValue.value = item;
};
// 我的消息
const toMessage = () => {
  uni.navigateTo({
    url: '/pages/common/message/index'
  });
};
// 收集错题
const toCollect = () => {
  console.log('收集错题');
  uni.navigateTo({
    url: '/pages/common/mistakes/collect/index'
  });
};
// 作业上传
const toHomework = () => {
  console.log('作业上传');
  uni.navigateTo({
    url: '/pages/common/homework/index'
  });
};
// 往期日报
const toReport = () => {
  console.log('往期日报', currentTab.value);
  uni.navigateTo({
    url: '/pages/common/report/index?type=' + currentTab.value,
  });
};

onShow(() => {
  for (let i = 0; i < 9; i++) {
    uni.setTabBarItem({
      index: i,
      visible: i < 3 ? true : false,
    });
  }
  uni.setTabBarStyle({
    selectedColor: '#FFB74D',
    color: '#999999',
  });
});
</script>

<style lang="scss" scoped>
.student-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 25rpx;
  border-bottom: 1rpx solid #ddd;
}

.top-block {
  display: flex;

  gap: 30rpx;

  .left {
    display: flex;
    flex-direction: column;
    gap: 30rpx;

    .box {
      width: 220rpx;
      height: 200rpx;
      border-radius: 20rpx;
      padding: 24rpx;
      box-sizing: border-box;


      &.question {
        border: solid 1px rgba(255, 143, 0, 0.5);
        background: url('/static/image/bg-question.png') no-repeat center center / 100% 100%;
      }

      &.homeword {
        border: solid 1px rgba(251, 53, 53, 0.5);
        background: url('/static/image/bg-homework.png') no-repeat top left / 100% 100%;
      }
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-radius: 32rpx;
    border: 1rpx solid #e0e2e5;
    background: #ebf3ff;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 24rpx;
      box-sizing: border-box;
    }

    .content {
      flex: 1;
      padding: 20rpx 24rpx;
      box-sizing: border-box;
      background: white;
      border-radius: 32rpx;
    }
  }
}

.bottom-block {
  margin: 36rpx 0;
  border-radius: 32rpx;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .tabs {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-top: 40rpx 30rpx 0 0;
    background: #ebf3ff;
    border-radius: 32rpx 32rpx 0 0;
    margin-top: 16rpx;
    height: 140rpx;
    position: relative;
    background: url('/static/image/bg-report-header.png') no-repeat center center / 100% 100%;

    &.daily-active:after {
      content: '';
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 156rpx;
      top: -10rpx;
      left: 0;
      background: url('/static/image/tab-active.png') no-repeat top left / 100% 100%;
      z-index: 1;
    }

    &.weekly-active:after {
      content: '';
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 156rpx;
      top: -10rpx;
      left: 0;
      background: url('/static/image/tab-active_1.png') no-repeat top left / 100% 100%;
      z-index: 1;
    }

    .tab-item {
      box-sizing: border-box;
      // padding: 0rpx 50rpx 30rpx 50rpx;
      text-align: center;
      font-size: 32rpx;
      color: #666666;
      font-weight: 500;
      z-index: 2;
      width: 174rpx;
      height: 140rpx;
      line-height: 120rpx;

      &.active {
        color: #333;
        font-weight: bold;
      }
    }
  }

  .tab-content {
    background: white;
    flex: 1;
    padding: 0 30rpx 30rpx 30rpx;

    .time-range {
      background: #fff9f0;
      padding: 24rpx;
      border-radius: 20rpx;
    }

    .knowledge-list {
      background: #fff9f0;
      padding: 24rpx;
      margin-top: 24rpx;
      border-radius: 20rpx;
    }
  }
}

.subject-box {
  padding: 32rpx;

  .subject-list {
    .subject-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx;
      border-bottom: 1rpx solid #e0e2e5;

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.more {
  flex: 1;
  margin-right: 20rpx;
  position: relative;
  z-index: 99;
  height: 100%;
  line-height: 120rpx
}
</style>
